<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/css/base.css">
    <link rel="stylesheet" href="/js/bootstrap/bootstrap-v4.3.1.min.css">
    <link rel="stylesheet" href="/css/home.css">
    <title>首页</title>
</head>

<body>
    <header class="header shadow-sm rounded">
        <div class="top-menu">
            <ul class="nav justify-content-end">
                <li class="nav-item dropdownnav-item">
                    <a class="nav-link" id="userDropdown" data-toggle="dropdown" aria-haspopup="true"
                        aria-expanded="false">
                        <span class="glyphicon glyphicon-user userName header-font">用户</span>
                    </a>
                    <div class="dropdown-menu" aria-labelledby="userDropdown">
                        <a class="dropdown-item" href="#">个人信息</a>
                        <a class="dropdown-item" href="#">。。。</a>
                        <a class="dropdown-item" href="#">退出</a>
                    </div>
                </li>
                <li class="nav-item"><a class="nav-link header-font">帮助</a></li>
                <li class="nav-item"><a class="nav-link header-font" cherf="#about">关于我们</a></li>
            </ul>
        </div>
    </header>
    <div class="myCarousel text-sm-center font-italic">
        <h1>欢迎使用诊辅系统
        </h1>
        <h3>Welcome to the diagnostic counseling system</h3>
        <img class="scroll" src="/images/topimges/scroll.png" alt="">
    </div>
    <div class="container menu_box">
        <div class="row">

            <!--/span3-->
            <div class="col-md-3">
                <div class="grey-box-icon">
                    <div class="icon-box-top grey-box-icon-pos">
                        <img src="/images/guide/issue.png" alt="">
                    </div>
                    <!--icon box top -->
                    <h4>发布课程</h4>
                    <p>利用您课余时间指导孩子</p>
                    <p><a href="#"><em>点击进入 →</em></a></p>
                </div>
                <!--grey box -->
            </div>
            <!--/span3-->
            <div class="col-md-3">
                <div class="grey-box-icon">
                    <div class="icon-box-top grey-box-icon-pos">
                        <img src="/images/guide/reservation.png" alt="">
                    </div>
                    <!--icon box top -->
                    <h4>预约课程</h4>
                    <p>根据您的需要预约课程</p>
                    <p><a href="#"><em>点击进入 →</em></a></p>
                </div>
                <!--grey box -->
            </div>
            <!--/span3-->
            <div class="col-md-3">
                <div class="grey-box-icon">
                    <div class="icon-box-top grey-box-icon-pos">
                        <img src="/images/guide/evaluate.png" alt="">
                    </div>
                    <!--icon box top -->
                    <h4>评价系统</h4>
                    <p>您的评价很重要!</p>
                    <p><a href="#"><em>点击进入 →</em></a></p>
                </div>
                <!--grey box -->
            </div>
            <!--/span3-->
            <div class="col-md-3">
                <div class="grey-box-icon">
                    <div class="icon-box-top grey-box-icon-pos">
                        <img src="/images/guide/history.png" alt="">
                    </div>
                    <!--icon box top -->
                    <h4>历史信息</h4>
                    <p>您使用系统的历史信息</p>
                    <p><a href="#"><em>点击进入 →</em></a></p>
                </div>
                <!--grey box -->
            </div>
        </div>
    </div>
    <div class="about container" id="about">
        <div class="wrapper clearfix">
            <img src="/images/aboutUs.png">
            <p class="about_txt">
                诊辅预约系统和校教务系统对接，能读取学校所有教师和学生的相关信息。诊辅预约系统根据学校教务系统能读取到的信息，设置诊辅时段(半个小时为一个时段）、诊辅教师、诊辅课程、诊辅反馈等相关选择项，每个诊辅课程最多预约5位学生。学生就外语学习规划、外语学习心理、外语学习方法问题在诊辅预约系统上预约相应的诊辅课程。在诊辅教师选择方面，学生可参考学生对诊辅教师的反馈数据。学生预约诊辅课程之后，需按时到诊辅中心诊辅，诊辅预约系统考勤学生和诊辅教师的出勤。诊辅教师在诊辅时，需在诊辅预约系统录入学生的外语学习问题和提供给学生的诊断辅导意见，在系统上形成诊辅记录，系统需保存学生的所有预约数据和诊辅记录，这些预约数据和诊辅记录在可以随时调取，学生再次预约课程进行诊辅时，他的历史预约数据和历史诊辅记录可以在复诊时给诊辅教师提供一些参考，以便更好地对症下药。诊辅中心座位管理,系统录入中心详细信息和地理位置,学生可以预定指定时间段座位
            </p>

            <div class="timeline">
                <hr class="hseparator">
                <div class="column">
                    <div class="right_row first">
                        <img src="/images/timeline_cercle.png" alt="" title="" class=" bullet_point">
                        <h2>Donec pede justo fringilla aliquet vulputate eget</h2>
                        <p>cum sociis natoque penatibus et magnis dis parturient montes nascetur ridiculus mus.</p>
                    </div>
                </div>

                <div class="column">
                    <div class="left_row">
                        <img src="/images/timeline_cercle.png" alt="" title="" class=" bullet_point">
                        <h2>Mauris vitae arcu in nibh faucibus vitae elit</h2>
                        <p>Nascetur ridiculus mus donec quam felis ultricies nec pellentesque pretium quis.</p>
                    </div>
                </div>

                <div class="column">
                    <div class="right_row">
                        <img src="/images/timeline_cercle.png" alt="" title="" class=" bullet_point">
                        <h2>Pellentesque in sapien sem commodo condimentum</h2>
                        <p>Nulla consequat massa quis enim donec pede justo fringilla vel nec vulputate eget arcu In
                            enim justo.</p>
                    </div>
                </div>

                <div class="column">
                    <div class="left_row last">
                        <img src="/images/timeline_cercle.png" alt="" title="" class=" bullet_point">
                        <h2>Vestibulum leo tempor mi vulputate auctor</h2>
                        <p>Maecenas sit amet lectus vestibulum suscipit velit eleifend tellus sliquam ornare odio
                            tempus eleifend.</p>
                    </div>
                </div>

            </div><!--  end timeline  -->

        </div><!--  end wrapper  -->
    </div>
    <div class="text-center p-3">
        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>Loading...
    </div>
    <footer>
        <div>
            <p class="text-center">123456</p>
        </div>
    </footer>
    <script src="/js/jquery-3.1.1.min.js"></script>
    <script src="/js/bootstrap/popper.min.js"></script>
    <script src="/js/bootstrap/bootstrap-v4.3.1.min.js"></script>
    <script src="/js/app.js"></script>
    <script>
        var home = (function () {
            var bindEvents = function () {
                $(window).on('scroll', function () {
                    var scrollTop = $(window).scrollTop();
                    if (scrollTop >= 420) {
                        home.el('.header').addClass("headervisible");
                        home.el('.header-font').addClass("font-white");
                    } else {
                        home.el('.header').removeClass("headervisible"); //如果存在(不存在)就切换(删除)样式
                        home.el('.header-font').removeClass("font-white"); //如果存在(不存在)就切换(删除)样式
                    }
                });

            };
            return {
                el: function (expr) {
                    return $(expr ? expr : 'body');
                },
                init: function () {
                    bindEvents();
                    return this
                }
            }
        })();
        $(function () {
            home.init();
        })
    </script>
</body>

</html>